<template>
  <div class="zong">
    <div class="main">
      <div class="main_1">
        <div class="main_2">
          <span>9:41</span>
        </div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="main_3">
        <div class="kit">KITCHEN STORY</div>
        <div class="main_3_1">
          <van-icon name="search" size="24px" color="#fff" />
        </div>
      </div>
      <div class="swiper-container1">
        <ul class="swiper-wrapper">
          <li class="swiper-slide" v-for="(item,index) in 4" :key="index">
            <div class="main_4_1">
              <div class="nangua"><img :src="img5" /></div>
              <div class="one">
                <div class="kaoxiang">
                  <span>烤箱</span>
                  <span>秘籍</span>
                </div>
                <div class="wanmei">完美烤箱烤蔬菜手到擒来</div>
                <div class="wanmei_1">
                  <span>去查看</span>
                  <span>
                    <van-icon name="play" />
                  </span>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <!-- <div class="swiper-pagination1"></div> -->
      </div>

    </div>
    <div class="main2">
      <div class="left">
        <h3 class="zuo">大家都在做</h3>
        <div class="tian">可盐可甜的美食厨房</div>
        <div><img :src="img6" /></div>
      </div>
      <div class="right">
        <div class="top">
          <div class="top_1">
            <h3>必读干货</h3>
            <div>青酱的6种玩法</div>
          </div>
          <div class="juzi"><img :src="img7" /></div>
        </div>
        <div class="foot">
          <div class="foot_1">
            <h3>教你做</h3>
            <div><img :src="img9"></div>
          </div>
          <div class="foot_2" @click="gofenlei">
            <h3>分类</h3>
            <div><img :src="img10"></div>
          </div>
        </div>
      </div>
      <div style="height:130px;"></div>
      <div class="baozang">
        <div>宝藏自制食谱</div>
        <div>查看更多</div>
      </div>
      <div class="lunbo_1">
        <div class="swiper mySwiper1">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in list" :key="index">
             <img :src="item.tu1" />
              <div>{{item.wenzi}}</div>
            </div>

          </div>
        </div>
      </div>
      <div class="xinyi"><span>新意新味</span></div>
      <div class="naixiang">
        <div><img :src="img12" /></div>
        <div class="likeo">
          <van-icon name="like-o" />
        </div>
        <div class="mogu">
          <span>奶香蘑菇千层面</span>
          <span>1min 54s</span>
        </div>
        <div class="juse">
          <span>GO</span>
          <span>
            <van-icon name="play" />
          </span>
        </div>
      </div>
      <div class="liangdian">
        <div>亮点甜点</div>
        <div>查看全部</div>
      </div>
      <div class="lunbo_2">
        <div class="swiper mySwiper2">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in list1" :key="index">
              <div class="shuju2"><img :src="item.tu2" /></div>
              <div class="miguo">
                <div>{{item.decr}}</div>
                <div class="kouwei">
                  <div>{{item.sty}}</div>
                  <div>{{item.min}}</div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
      <div class="cai"><span>猜你喜欢</span></div>
      <div>
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-card v-for="(item,index) in list2" :key="index" class="card">
             <template #desc >
                  <div class="card_1" @click="golikesinfo(item)">
                    <div class="lefttu">
                    <img :src="item.tu3"/>
                  </div>
                  <div class="jingdan">{{item.dec}}</div>
                  <div>
                    <div class="rightzi">
                    <div>{{item.foodname}}</div>
                    <div class="rightzi_1">
                      <div>#{{item.sty1}}</div>
                    <div>#{{item.sty2}}</div>
                    </div>
                    </div>
                    <div class="users">
                      <div class="righttu"><img :src="item.tu4"/></div>
                      <div>{{item.username}}</div>
                      <div>{{item.min}}</div>
                    </div>
                  </div>
                  </div>
             </template>
          </van-card>
        </van-list>

      </div>
      <div style="height:50px;"></div>


    </div>


  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import Swiper from 'swiper'
import myaxios from '@/utils/axios'

export default {
  data() {
    return {
      img5: require('../img/image5.jpg'),
      img6: require('../img/image6.jpg'),
      img7: require('../img/image7.jpg'),
      img9: require('../img/image9.jpg'),
      img10: require('../img/image10.jpg'),
      img12: require('../img/image12.jpg'),
      list:[],
      list1:[],
      list2:[],
      loading:false,
      finished:false,
    }
  },
  mounted() {
    this.$store.dispatch('changelikes1')
    myaxios.get('/meun').then(res=>{
        this.list=res.list
        this.$nextTick(() => {
      var swiper = new Swiper(".mySwiper1", {
        slidesPerView: 3,
        spaceBetween: 30,
        slideToClickedSlide: true,
      });
    })
      })
      myaxios.get('/tian').then(res=>{
        this.list1=res.list
        this.$nextTick(()=>{
          var swiper = new Swiper(".mySwiper2", {
        slidesPerView: 2,
        spaceBetween: 30,
        slideToClickedSlide: true,
      });
      
        })
      })
      this.$nextTick(()=>{
        var swiper = new Swiper('.swiper-container1', {
        // pagination: '.swiper-pagination1',
        slidesPerView: 1,
        paginationClickable: true,
        spaceBetween: 30,
        freeMode: true,
        autoplay: true,
        speed: 6000,
        loop: true,
        // pagination: '.swiper-pagination',
        // slideToClickedSlide: true,
      })
     
      })
      
    
  },
  methods:{
    gofenlei(){
      this.$router.push('/fenlei')
    },
    onLoad(){
       this.loading=true
      myaxios.get('/likes').then(res=>{
        this.list2=res.list
        this.loading=false
        this.finished=true
      })
    },
    golikesinfo(obj){
      this.$router.push({
            name:'likesinfo',
             params:{
              lid:obj.foodId
             } 
      })
    }
  },
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  background-color: #F0F0F0;
}
.righttu>img{
  display: block;
  width:35px;height:35px;
  border-radius:50% ;
}
.lefttu>img{
  display:block;
  width:170px;height:110px;
}
.shuju2 img{
  display: block;
  width:60px;height:64px;
}
.users>div:nth-child(3){
  font-size: 12px;
  margin-left: 25px;
  margin-top:15px;
  color:red;
}
.users>div:nth-child(2){
  font-size: 12px;
  margin-left: 5px;
  margin-top:15px;
}
.users img{
  width:35px;height:35px;
}
.users{
  margin-left: 20px;
  display: flex;
  margin-top:20px;
}
.rightzi_1>div:nth-child(2){
font-size: 12px;
color:rgba(153, 153, 153, 1);
 width:44px;height:20px;
 background-color: #F0F0F0;
 border-radius: 8px;
 line-height: 20px;
 text-align: center;
 margin-left: 5px;
}
.rightzi_1>div:nth-child(1){
font-size: 12px;
color:rgba(153, 153, 153, 1);
 width:44px;height:20px;
 background-color: #F0F0F0;
 border-radius: 8px;
 line-height: 20px;
 text-align: center;
}
.rightzi>div:nth-child(1){
  font-size: 18px;

}
.rightzi_1{
  display: flex;
  margin-top: 12px;
}
.rightzi{
  margin-left:20px;margin-top:15px;
}
.card_1{
  display: flex;
}
.jingdan{
  width:100px;height:33px;
  font-size: 12px;
  color:rgba(153, 153, 153, 1);
  line-height: 33px;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: #fff;
  padding-left:10px;
  position: absolute;
  left:25px;top:90px;
  border-radius: 5px;
}
.card{
  position: relative;
  
}
.lefttu>img{
  display: block;
  margin-top:15px;
  margin-left: 15px;
  width:170px;height:110px;
  margin-bottom: 15px;
}
.cai>span {
  margin-left: 20px;
}

.cai {
  width: 100%;
  height: 30px;
  font-size: 16px;
  margin-top: 15px;
}

.kouwei>div:nth-child(2) {
  width: 34px;
  height: 14px;
  font-size: 12px;
  color: #CCCCCC;
  margin-top: 3px;
  margin-left: 25px;
}

.kouwei>div:nth-child(1) {
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  transform: scale(0.8);
  width: 34px;
  height: 20px;
  border-radius: 3px;
  background-color: #48A2A9;
  color: #fff;
}

.kouwei {
  display: flex;
}

.miguo {
  font-size: 14px;
  margin-top: 15px;
}

.lunbo_2 .swiper-slide img {
  margin-left: 10px;
  margin-top: 12px;
}

.lunbo_2 .swiper-slide {
  background-color: #fff;
  width: 180px;
  height: 88px;
  display: flex;
  border-radius: 5px;
}

.lunbo_2 {
  margin-top: 10px;
}

.liangdian>div:nth-child(1) {
  font-size: 16px;
  margin-left: 20px;

}

.liangdian>div:nth-child(2) {
  font-size: 12px;
  margin-left: 220px;
  color: rgba(153, 153, 153, 1);
}

.liangdian {
  width: 100%;
  height: 30px;
  display: flex;
  line-height: 30px;
  margin-top: 10px;
}

.juse>span:nth-child(1) {
  font-size: 16px;
  margin-left: 10px;
}

.juse {
  width: 62px;
  height: 44px;
  position: absolute;
  left: 285px;
  top: 155px;
  background-color: rgba(243, 84, 16, 1);
  color: #fff;
  line-height: 44px;
  border-radius: 20px;
}

.mogu>span:nth-child(2) {
  font-size: 12px;
  margin-left: 58px;
  color: rgba(243, 84, 16, 1);
}

.mogu>span:nth-child(1) {
  font-size: 14px;
  margin-left: 10px;
}

.mogu {
  width: 237px;
  height: 44px;
  background-color: #fff;
  position: absolute;
  left: 36px;
  top: 155px;
  line-height: 44px;
  border-radius: 5px;
}

.likeo {
  position: absolute;
  left: 315px;
  top: 32px;
}

.naixiang {
  position: relative;
}

.xinyi>span {
  margin-left: 20px;
}

.xinyi {
  width: 100%;
  height: 30px;
  font-size: 16px;
  margin-top: 15px;
}
.lunbo_1 img{
  display: block;
  width:130px;height:150px;
  
}

.lunbo_1 .swiper-slide>div {
  position: absolute;
  font-size: 12px;
  color: #fff;
  left: 25px;
  top: 130px;
}

.lunbo_1 .swiper-slide {
  position: relative;
  /* width:160px;height:180px; */
  
}

.lunbo_1 {
  margin-top: 10px;
}

.baozang>div:nth-child(1) {
  font-size: 16px;
  margin-left: 20px;

}

.baozang>div:nth-child(2) {
  font-size: 12px;
  margin-left: 190px;
  color: rgba(153, 153, 153, 1);
}

.baozang {
  width: 100%;
  height: 30px;
  display: flex;
  line-height: 30px;
}

.foot_2>h3 {
  width: 24px;
  height: 17px;
  font-size: 12px;
  margin-left: 5px;
  margin-top: 3px;
}

.foot_1>div {
  width: 15px;
  height: 16px;
  margin-top: 18px;
  margin-right: 22px;
}

.foot_1>h3 {

  width: 60px;
  height: 17px;
  font-size: 12px;
  margin-left: 5px;
  margin-top: 3px;

}

.foot_1 {

  display: flex;
}

.foot_2 {
  display: flex;
}

.top_1>h3 {
  width: 56px;
  height: 20px;
  font-size: 14px;
  color: black;
  margin-left: 12px;
  margin-top: 16px;
}

.top_1>div {
  width: 80px;
  height: 16px;
  font-size: 11px;
  color: #CCCCCC;
  margin-left: 12px;

}

.top {
  display: flex;
}

.tian {
  width: 110px;
  height: 16px;
  font-size: 11px;
  color: rgba(204, 204, 204, 1);
  margin-left: 16px;
}

.zuo {
  width: 80px;
  height: 23px;
  font-size: 16px;
  color: rgba(243, 84, 16, 1);
  margin-left: 16px;
  margin-top: 13px;
}

.foot_2 {
  width: 78px;
  height: 52px;
  border-radius: 5px;
  background-color: #fff;
  margin-top: 8px;
  margin-left: 8px;
}

.foot_1 {
  width: 78px;
  height: 52px;
  border-radius: 5px;
  background-color: #fff;
  margin-top: 8px;
}

.foot {
  display: flex;
}

.top {
  width: 163px;
  height: 72px;
  border-radius: 5px;
  background-color: #fff;
}

.left img {
  display: block;
  height: 80px;
  width: 140px;
  margin-left: 3px;
}

.juzi img {
  width: 68px;
  display: block;
  height: 68px;
}

.left {
  width: 162px;
  height: 132px;
  background-color: #fff;
  position: absolute;
  left: 20px;
  top: -24px;
  border-radius: 5px;
}

.right {
  width: 162px;
  height: 132px;

  position: absolute;
  left: 192px;
  top: -24px;
}

.zong {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-Y: scroll;
}

.main_1 {
  height: 44px;
  overflow: hidden;
  display: flex;
}

.main_2 {
  width: 54px;
  height: 18px;
  margin-left: 21px;
  margin-top: 14px;
}

.main_2 span {
  font-size: 15px;
  margin-left: 10px;
  color: #fff;
}

.main_3 {
  height: 44px;
  display: flex;
  align-items: center;
}

.main_3_1 {
  margin-left: 130px;
  margin-top: 13px;
}

.main2 {
  width: 100%;
  height: calc(100% - 280px);

  position: relative;
}

.main {
  left: 0px;
  top: 0px;
  width: 100%;
  height: 280px;
  opacity: 1;
  background: url(https://img.js.design/assets/img/621cad80a89b5a911b7283fc.png);
  overflow: hidden;
  background-size: cover;
}

.one {
  width: 341px;
  height: 140px;
  margin-top: 4px;
  border-radius: 10px;
  background-color: #ffc763;
  overflow: hidden;

}

.kit {
  font-size: 20px;
  margin-left: 20px;
  margin-top: 13px;
  font-weight: 800;
  color: #fff;
}

.kaoxiang {
  margin-left: 20px;
  margin-top: 18px;
  width: 112px;
  height: 38px;
  opacity: 1;
}

.kaoxiang span:nth-child(1) {
  font-size: 28px;
  font-weight: 900;
  color: rgba(84, 44, 38, 1);
}

.kaoxiang span:nth-child(2) {
  font-size: 28px;
  font-weight: 900;
  color: rgba(243, 84, 16, 1);
}

.wanmei {
  margin-left: 20px;
  margin-top: 5px;
  width: 132px;
  height: 17px;
  opacity: 1;
  /** 文本1 */
  font-size: 12px;
  line-height: 17px;
  font-weight: 400;
  letter-spacing: -0.04px;
  color: rgba(115, 79, 55, 1);
}

.wanmei_1 {
  width: 65px;
  height: 20px;
  background: #fff;
  border-radius: 15px;
  margin-left: 20px;
  margin-top: 7px;
}

.wanmei_1 span:nth-child(1) {
  margin-left: 10px;
  font-size: 11px;
  line-height: 20px;
  color: rgba(115, 79, 55, 1)
}

.wanmei_1 span:nth-child(2) {
  color: rgba(115, 79, 55, 1)
}

.nangua {
  position: absolute;
  left: 182px;
  top: -4px;
}

.main_4 {
  display: flex;
  overflow: scroll;
}

.main_4_1 {
  width: 347px;
  height: 144px;
  margin-top: 12px;
  margin-left: 20px;
  overflow: hidden;
  position: relative;
}
</style>

